<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的歪麦呢 - 首页</title>
		<script src="js/jquery-3.7.1.js"></script>
		<link rel="stylesheet" href="css/home.css">
	</head>
	<body>
		<!-- 顶部搜索栏 -->
		<div class="header">
			<div class="search-bar">
				<input type="text" class="search-input" placeholder="搜索美食、商家">
			</div>
			<div class="location">
				<span class="location-icon">📍</span>
				<span>上海市浦东新区陆家嘴</span>
			</div>
		</div>

		<!-- 促销Banner -->
		<div class="banner">
			新用户立减20元
		</div>

		<!-- 快捷入口 -->
		<div class="quick-actions">
			<div class="action-item">
				<div class="action-icon">🍔</div>
				<div class="action-text">快餐</div>
			</div>
			<div class="action-item">
				<div class="action-icon">🍜</div>
				<div class="action-text">面食</div>
			</div>
			<div class="action-item">
				<div class="action-icon">🍲</div>
				<div class="action-text">火锅</div>
			</div>
			<div class="action-item">
				<div class="action-icon">🍱</div>
				<div class="action-text">日料</div>
			</div>
		</div>

		<!-- 商家推荐 -->
		<div class="section-title">
			附近商家
			<span style="font-size: 12px; font-weight: normal; color: #999;">全部 ></span>
		</div>

		<!-- 商家卡片 -->
		<div class="restaurant-card ">
			<div class="restaurant-image" id="logo">
				<div class="restaurant-tag">品牌</div>
			</div>
			<div class="restaurant-info">
				<div class="restaurant-name" id="name">川味小厨</div>
				<div class="restaurant-meta">
					<span class="rating" id="rating">⭐4.8 (1000+)</span>
					<span id="monthly-sales">月售2000+</span>
				</div>
				<div class="delivery-info">
					<span class="delivery-time" id="delivery-time">30分钟</span>
					<span id="min_order_price">起送¥20 </span>
					<span id="delivery_fee"> | 配送费¥3</span>
				</div>
				<div class="restaurant-description" id="description">
					商家描述
				</div>
			</div>
		</div>
		<!-- 底部导航 -->
		<div class="bottom-nav">
			<div class="nav-item active">
				<div class="nav-icon">🏠</div>
				<div>首页</div>
			</div>
			<div class="nav-item" onclick="goToOrders()">
				<div class="nav-icon">📦</div>
				<div>订单</div>
			</div>
			<div class="nav-item" onclick="goToCart()">
				<div class="nav-icon">🛒</div>
				<div>购物车</div>
			</div>
			<div class="nav-item" onclick="goToProfile()">
				<div class="nav-icon">👤</div>
				<div>我的</div>
			</div>
		</div>
	</body>
</html>
<script>
	$(function(){
		getHomeList()
	})
	
	function goToProfile() {
		window.location.href = "profile.html"
	}

	function goToOrders() {
		window.location.href = "orders.html"
	}

	function goToCart() {
		window.location.href = "cart.html"
	}

	function getHomeList() {
		const token = sessionStorage.getItem('token');
		if (!token) {
			window.location.href = 'login.html';
			return;
		}
		$.ajax({
			url: 'http://localhost:8080/home',
			type: 'GET',
			contentType: 'home/json',
			dataType: 'json',
			headers: {
				Authorization: 'Bearer' + sessionStorage.getItem("token")
			},
			success: function(response) {
				console.log('<UNK>:', response);
				if (response.code === 1 && response.data) {
					// 清空或创建商家列表容器
					$('.restaurant-card').remove(); // 移除示例卡片
					const restaurantContainer = $('<div class="restaurant-container"></div>');
					$('body').append(restaurantContainer);

					// 遍历商家数据并创建卡片
					response.data.forEach(restaurant => {
						const cardHtml = `
						<div class="restaurant-card" id=${restaurant.id}>
							<div class="restaurant-image" style="background-image: url('${restaurant.logo || ''}')">
								${restaurant.tag ? `<div class="restaurant-tag">${restaurant.tag}</div>` : ''}
							</div>
							<div class="restaurant-info">
								<div class="restaurant-name">${restaurant.name || '商家名称'}</div>
								<div class="restaurant-meta">
									<span class="rating">⭐${restaurant.rating || '0.0'} (${restaurant.reviewCount || '0'}+)</span>
									<span>月售${restaurant.monthlySales || '0'}+</span>
								</div>
								<div class="delivery-info">
									<span class="delivery-time">${restaurant.deliveryTime || '--'}分钟</span>
									<span>起送¥${restaurant.minOrderPrice || '0'} </span>
									<span> | 配送费¥${restaurant.deliveryFee || '0'}</span>
								</div>
								<div class="restaurant-description">
									${restaurant.description || '商家描述'}
								</div>
							</div>
						</div>
					`;
						restaurantContainer.append(cardHtml);
					});
				} else {
					console.error('获取商家列表失败:', response.message);
				}
			}
		})
	}
</script>
